<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all" />
</head>
<body>

	<input type="hidden" id="edit" th:value="${dCustomer!=null?dCustomer.clientId:''}">
	<input type="hidden" id="data" th:value="${dCustomer!=null?dCustomer.address:''}">
	<div class="layui-container" style="margin-top: 20px">
	<form class="layui-form" lay-filter="customerForm"  id = "customerData">
		<div class="layui-form-item">
			<div class="layui-inline" lay-filter="selectNet">
				<label class="layui-form-label">用户编号</label>
				<div class="layui-inline">
					<input name="clientId" id="client" lay-verify="required" th:value="${dCustomer!=null?dCustomer.clientId:''}"
						   autocomplete="off" class="layui-input">

				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户名称</label>
				<div class="layui-input-inline">
					<input type="text" name="clientName" lay-verify="required" th:value="${dCustomer!=null?dCustomer.clientName:''}"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" lay-filter="selectNet">
				<label class="layui-form-label">客户全称</label>
				<div class="layui-inline">
					<input name="clientFullName"  lay-verify="required" th:value="${dCustomer!=null?dCustomer.clientFullName:''}">
			
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">结算方式</label>
				<div class="layui-input-inline">
				<select name="settmentMethod" id="pay" lay-verify="required" >
						<option value="">请选择</option>
						<option th:each="pay:${payMethodList}" th:value="${pay!=null?pay.dictId:''}" th:text="${pay.dictItemName}" th:selected="${pay!=null&&dCustomer!=null ? pay.dictId == dCustomer.settmentMethod :''}"></option>

					</select>
					
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">联系人</label>
				<div class="layui-input-inline">
					<input type="text" name="contactor" lay-verify="required" th:value="${dCustomer!=null?dCustomer.contactor:''}"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-inline">
					<input type="tel" name="cellphone" lay-verify="required" th:value="${dCustomer!=null?dCustomer.cellphone:''}"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">座机</label>
				<div class="layui-input-inline">
					<input type="text" name="telephone" lay-verify="required" th:value="${dCustomer!=null?dCustomer.telephone:''}"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户级别</label>
				<div class="layui-input-inline">
					<select name="clientType" lay-verify="required">
						<option value="">请选择</option>
						<option value= 1 th:selected="${dCustomer!=null&&dCustomer.clientType ==1 ?true:false}">高级客户</option>
						<option value= 0 th:selected="${dCustomer!=null&&dCustomer.clientType ==0 ?true:false}">普通客户</option>

					</select>
				</div>
			</div>

		</div>

		<div class="layui-form-item" id="area-picker">
			<div class="layui-inline" lay-filter=""  >
				<label class="layui-form-label">省份</label>
				<div class="layui-input-inline">
					<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
						<option value="">请选择省</option>
					</select>
				</div>
				<label class="layui-form-label">市</label>
				<div class="layui-input-inline">
					<select name="city" class="city-selector" data-value="" lay-filter="city-1">
						<option value="">请选择市</option>
					</select>
				</div>

				<label class="layui-form-label">区</label>
				<div class="layui-input-inline">
					<select name="county" class="county-selector" data-value="" lay-filter="county-1">
						<option value="">请选择区</option>
					</select>
				</div>
			</div>

		</div>
		
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">网点分配</label>
				<div class="layui-input-inline">
					<select name="networkId" id="net" lay-verify="required">
						<option value="">请选择</option>

						<option th:each="network:${networkList}" th:value="${network.networkId}" th:text="${network.networkName}" th:selected="${dCustomer!=null? dCustomer.networkId ==network.networkId:''}"></option>

					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<input type="text" name="address" id="addressInfo" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>

		</div>
		

			
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" id="submit" lay-submit
					lay-filter="customerForm">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
</body>
<script type="text/javascript"  th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript"  th:src="@{/lib/mods/layarea.js}"></script>
<script type="text/javascript" th:inline="none">
	//配置插件目录
	layui.config({
		base: '/lib/mods/'
		, version: '1.0'
	});

layui.use(['form','upload','layer','jquery','layarea'], function(){
   form = layui.form;
  var upload = layui.upload;
  form.render('select','test1');
  $ = layui.jquery;
	layarea = layui.layarea;
  var addressData = $("#data").val();

  if (addressData != undefined && addressData !='' &&addressData.length !=0) {
  	var array = addressData.split(",");
  	$("[name='province']").attr("data-value",array[0]) ;
  	$("[name='city']").attr("data-value",array[1]) ;
  	$("[name='county']").attr("data-value",array[2]) ;
  	$("[name='address']").attr("value",array[3]) ;
  }
  rank = 1;


		//地址的渲染
		layarea.render({
			elem: '#area-picker',
			change: function (res) {
				//选择结果
				console.log(res);
			}
		});

   
   //客户类型
   $("[name = 'clientType']").append("<option value= 1 >高级客户</option>");
   $("[name = 'clientType']").append("<option value= 0 >普通客户</option>");

			//监听提交
			form.on('submit(customerForm)', function(data) {
				
				var dCustomer = data.field;
				//进行指定格式的数据拼接
				dCustomer.adress=dCustomer.province+","+dCustomer.city+","+dCustomer.county+","+dCustomer.address;
				var index = top.layer.msg('数据提交中，请稍候', {
					icon : 16,
					time : false,
					shade : 0.8
				});
				var method = "";
				if (addressData == null || addressData == undefined ||addressData == '') {
					method = "add";
				} else {
					method = "update";
				}
				
				$.post("/api/customer/"+method,dCustomer,function(d){
					if (d.code == 200) {
						top.layer.close(index);
			            top.layer.msg("员工添加成功！");
			            layer.closeAll("iframe");
			            //刷新父页面
			            parent.location.reload();
					} else {
						layer.msg(d.msg,{"icon":2});
					}
				});
				
				
				return false;
			});
			});

				
   

</script>


</html>